<template>
  <image
    class="logo"
    src="http://127.0.0.1:3000/static/logo.png"
    mode="aspectFit"
  />
  <view class="text">授权快乐星球，开启不一样的快乐</view>
  <button class="button" @click="handleLogin">授权登录</button>
</template>
<script lang="ts" setup>
import { empower } from "@/api";

const handleLogin = async () => {
  uni.showLoading({
    title: "授权中···",
    mask: true,
  });
  const { code } = await uni.login();
  const { success, message, result } = await empower(code);
  uni.hideLoading();
  if (success) {
    uni.showToast({ title: "授权成功", icon: "success", mask: true });
    uni.setStorageSync("user", result);
    setTimeout(() => {
      uni.reLaunch({
        url: "/pages/home/index",
      });
    }, 1000);
  } else {
    uni.showToast({
      title: message,
      icon: "error",
    });
  }
};
</script>
<style scoped>
.logo {
  display: block;
  width: 300rpx;
  height: 300rpx;
  border-radius: 40rpx;
  margin: 160rpx auto 80rpx;
}
.text {
  text-align: center;
  font-size: 30rpx;
  color: #333;
  margin: 20rpx auto;
}
.button {
  display: block;
  width: 300rpx;
  height: 80rpx;
  margin: 0 auto;
  background-color: #ffa500;
  color: #fff;
  border-radius: 40rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 32rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
}
</style>
